TypeScript Generics: Bemästra komplexa datatyper för robusta applikationer

TypeScript, ett superset av JavaScript, ger utvecklare möjlighet att skriva mer robust och underhållbar kod genom statisk typning. Bland dess mest kraftfulla funktioner finns generics, som låter dig skriva kod som kan fungera med en mängd olika datatyper samtidigt som typsäkerheten bibehålls. Denna guide ger en omfattande genomgång av TypeScript generics, med fokus på deras tillämpning på komplexa datatyper i samband med global mjukvaruutveckling.

Vad är Generics?

Generics erbjuder ett sätt att skriva återanvändbar kod som kan fungera med olika typer. Istället för att skriva separata funktioner eller klasser för varje typ du vill stödja, kan du skriva en enda funktion eller klass som använder typparametrar. Dessa typparametrar är platshållare för de faktiska typer som kommer att användas när funktionen eller klassen anropas eller instansieras. Detta är särskilt användbart när man hanterar komplexa datastrukturer där typen av data inom dessa strukturer kan variera.

Fördelar med att använda Generics

• Kodåteranvändning: Skriv kod en gång och använd den med olika typer. Detta minskar kodduplicering och gör din kodbas mer underhållbar.
• Typsäkerhet: Generics gör det möjligt för TypeScript-kompilatorn att upprätthålla typsäkerhet vid kompileringstillfället. Detta hjälper till att förhindra körtidsfel relaterade till typkonflikter.
• Förbättrad läsbarhet: Generics gör din kod mer läsbar genom att tydligt ange vilka typer dina funktioner och klasser är utformade för att arbeta med.
• Förbättrad prestanda: I vissa fall kan generics leda till prestandaförbättringar eftersom kompilatorn kan optimera den genererade koden baserat på de specifika typer som används.

Grundläggande syntax för Generics

Den grundläggande syntaxen för generics innebär att man använder vinkelparenteser (< >) för att deklarera typparametrar. Dessa typparametrar namnges vanligtvis T, K, V, etc., men du kan använda vilken giltig identifierare som helst. Här är ett enkelt exempel på en generisk funktion:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Utskrift: hello
console.log(myNumber); // Utskrift: 123
console.log(myBoolean); // Utskrift: true

I detta exempel deklarerar <T> en typparameter med namnet T. Funktionen identity tar ett argument av typen T och returnerar ett värde av typen T. När du anropar funktionen kan du explicit ange typparametern (t.ex. identity<string>) eller låta TypeScript härleda den baserat på argumentets typ.

Arbeta med komplexa datatyper

Generics blir särskilt värdefulla när man hanterar komplexa datatyper som arrayer, objekt och gränssnitt. Låt oss utforska några vanliga scenarier:

Generiska arrayer

Du kan använda generics för att skapa funktioner eller klasser som fungerar med arrayer av olika typer:

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Utskrift: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Utskrift: apple, banana, cherry

Här tar funktionen arrayToString en array av typen T[] och returnerar en strängrepresentation av arrayen. Denna funktion fungerar med arrayer av alla typer, vilket gör den mycket återanvändbar.

Generiska objekt

Generics kan också användas för att definiera funktioner eller klasser som fungerar med objekt av olika former:

interface Person {
  name: string;
  age: number;
  country: string; // Lade till land för global kontext
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Lade till valuta för global kontext
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Utskrift: Name: Alice
displayInfo(product); // Utskrift: Name: Laptop

I detta exempel tar funktionen displayInfo ett objekt av typen T som måste ha en name-egenskap av typen string. Klausulen extends { name: string } är en begränsning, som specificerar minimikraven för typparametern T. Detta säkerställer att funktionen säkert kan komma åt name-egenskapen.

Avancerad användning av Generics

TypeScript generics erbjuder mer avancerade funktioner som gör att du kan skapa ännu mer flexibel och kraftfull kod. Låt oss utforska några av dessa funktioner:

Flera typparametrar

Du kan definiera funktioner eller klasser med flera typparametrar:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Utskrift: Bob
console.log(merged.age); // Utskrift: 42

Funktionen merge tar två objekt av typerna T och U och returnerar ett nytt objekt som innehåller egenskaperna från båda objekten. Detta är ett kraftfullt sätt att kombinera data från olika källor.

Generiska begränsningar

Som tidigare visats låter begränsningar dig inskränka vilka typer som kan användas med en generisk typparameter. Detta säkerställer att den generiska koden säkert kan operera på de specificerade typerna.

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Utskrift: 3
loggingIdentity("hello"); // Utskrift: 5
// loggingIdentity(123); // Fel: Argument av typen 'number' kan inte tilldelas till parameter av typen 'Lengthwise'.

Funktionen loggingIdentity tar ett argument av typen T som måste ha en length-egenskap av typen number. Detta säkerställer att funktionen säkert kan komma åt length-egenskapen.

Generiska klasser

Generics kan också användas med klasser:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Utskrift: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Utskrift: [ 2 ]

Klassen DataStorage kan lagra data av vilken typ som helst T. Detta gör att du kan skapa återanvändbara datastrukturer som är typsäkra.

Generiska gränssnitt

Generiska gränssnitt är användbara för att definiera kontrakt som kan fungera med olika typer. Till exempel:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Gränssnittet Result definierar en generisk struktur för att representera resultatet av en operation. Det kan antingen innehålla data av typen T eller ett fel av typen E. Detta är ett vanligt mönster för att hantera asynkrona operationer eller operationer som kan misslyckas.

Utility Types och Generics

TypeScript tillhandahåller flera inbyggda "utility types" som fungerar bra med generics. Dessa hjälptyper kan hjälpa dig att omvandla och manipulera typer på kraftfulla sätt.

Partial<T>

Partial<T> gör alla egenskaper av typen T valfria:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Giltig

Readonly<T>

Readonly<T> gör alla egenskaper av typen T skrivskyddade:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Fel: Kan inte tilldela till 'age' eftersom det är en skrivskyddad egenskap.

Pick<T, K>

Pick<T, K> väljer en uppsättning egenskaper K från typen T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> tar bort en uppsättning egenskaper K från typen T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> skapar en typ med nycklar K och värden av typen T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Utökad lista för global kontext
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Utökad lista för global kontext

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Mapped Types

Mapped types låter dig omvandla befintliga typer genom att iterera över deras egenskaper. Detta är ett kraftfullt sätt att skapa nya typer baserade på befintliga. Du kan till exempel skapa en typ som gör alla egenskaper i en annan typ skrivskyddade:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Fel: Kan inte tilldela till 'age' eftersom det är en skrivskyddad egenskap.

I detta exempel itererar [K in keyof Person] över alla nycklar i Person-gränssnittet, och Person[K] hämtar typen för varje egenskap. Nyckelordet readonly gör varje egenskap skrivskyddad.

Conditional Types

Conditional types låter dig definiera typer baserat på villkor. Detta är ett kraftfullt sätt att skapa typer som anpassar sig till olika scenarier.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Hanterar både null och undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Utskrift: HELLO

  const invalidValue = getValue(null); // Detta kommer att kasta ett fel
  console.log(invalidValue); // Denna rad kommer inte att nås
} catch (error: any) {
  console.error(error.message); // Utskrift: Value cannot be null or undefined
}

I detta exempel kontrollerar typen NonNullable<T> om T är null eller undefined. Om så är fallet returnerar den never, vilket betyder att typen inte är tillåten. Annars returnerar den T. Detta gör att du kan skapa typer som garanterat inte är nullbara.

Bästa praxis för att använda Generics

Här är några bästa praxis att tänka på när du använder generics:

• Använd beskrivande namn på typparametrar: Välj namn som tydligt indikerar syftet med typparametern.
• Använd begränsningar för att inskränka vilka typer som kan användas med en generisk typparameter: Detta säkerställer att din generiska kod säkert kan operera på de specificerade typerna.
• Håll din generiska kod enkel och fokuserad: Undvik att överkomplicera din generiska kod med för många typparametrar eller komplexa begränsningar.
• Dokumentera din generiska kod noggrant: Förklara syftet med typparametrarna och eventuella begränsningar som används.
• Överväg avvägningarna mellan kodåteranvändning och typsäkerhet: Även om generics kan förbättra kodåteranvändningen kan de också göra din kod mer komplex. Väg fördelarna och nackdelarna innan du använder generics.
• Tänk på lokalisering och globalisering (l10n och g11n): När du hanterar data som ska visas för användare i olika regioner, se till att dina generics stöder lämplig formatering och kulturella konventioner. Till exempel kan nummer- och datumformatering variera avsevärt mellan olika locales.

Exempel i en global kontext

Låt oss titta på några exempel på hur generics kan användas i en global kontext:

Valutaomvandling

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // Utskrift: 100 USD is equal to 85 EUR

Datumformatering

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

Översättningstjänst

interface Translation {
  [key: string]: string; // Tillåter dynamiska språknycklar
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // Utskrift: Hello
console.log(translate("hello", "es", languageData)); // Utskrift: Hola
console.log(translate("welcome", "fr", languageData)); // Utskrift: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Utskrift: Translation for missingKey in de not found.

Slutsats

TypeScript generics är ett kraftfullt verktyg för att skriva återanvändbar, typsäker kod som kan fungera med komplexa datatyper. Genom att förstå den grundläggande syntaxen, avancerade funktioner och bästa praxis för generics kan du avsevärt förbättra kvaliteten och underhållbarheten i dina TypeScript-applikationer. När du utvecklar applikationer för en global publik kan generics hjälpa dig att hantera olika dataformat och kulturella konventioner, vilket säkerställer en smidig användarupplevelse för alla.